﻿<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="App1.ItemDetailPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:data="using:App1.Data"
    xmlns:common="using:App1.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>

     
        
        <!-- Collection of items displayed by this page -->
        <CollectionViewSource
            x:Name="itemsViewSource"
            Source="{Binding Capitulo}"
            d:Source="{Binding TodosCapitulos[0].Items, Source={d:DesignInstance Type=data:DataSourceLivro, IsDesignTimeCreatable=True}}"/>

        <CollectionViewSource
            x:Name="DadosPagina"
            Source="{Binding Capitulo}"
            d:Source="{Binding GetCapitulo[0], Source={d:DesignInstance Type=data:DataSourceLivro, IsDesignTimeCreatable=True}}"/>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->

    <Grid Background="{StaticResource Fundo}"
       
        Style="{StaticResource LayoutRootStyle}" 
        DataContext="{Binding Capitulos}"
        d:DataContext="{Binding TodosCapitulos[0], Source={d:DesignInstance Type=data:DataSourceLivro, IsDesignTimeCreatable=True}}">

        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <FlipView
            x:Name="flipView"
            AutomationProperties.AutomationId="ItemsFlipView"
            AutomationProperties.Name="Item Details"
            TabIndex="1"
            Grid.RowSpan="2"
            Padding="100,0,0,0"
            ItemsSource="{Binding Source={StaticResource itemsViewSource}}">
            
            <FlipView.ItemContainerStyle>
                <Style TargetType="FlipViewItem">
                    <Setter Property="Margin" Value="0,148,0,0"/>
                </Style>
            </FlipView.ItemContainerStyle>

            <FlipView.ItemTemplate>
                <DataTemplate>

                    <!--
                        UserControl chosen as the templated item because it supports visual state management
                        Loaded/unloaded events explicitly subscribe to view state updates from the page
                    -->
                    <UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates">
                        <ScrollViewer x:Name="scrollViewer" Style="{StaticResource HorizontalScrollViewerStyle}" Grid.Row="1">
                            <Grid >
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="600"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="600"></ColumnDefinition>
                                    <ColumnDefinition Width="*"></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <StackPanel  Width="600" Height="480">
                                <Image x:Name="image"  
                                       Stretch="Fill" Source="{Binding Image}" 
                                       Width="650" Height="480"
                                       AutomationProperties.Name="{Binding Titulo}" Grid.Row="0" Grid.Column="0"  />
                                    </StackPanel>
                                
                                <StackPanel  Grid.Row="0" Grid.Column="1"  Margin="-60,60,0,60"
                                             Background="#EE9A00" Width="600" >
                                    <StackPanel Margin="20,20,20,30">
                                    <TextBlock x:Name="txbTitulo" Margin="0,0,0,5" Text="{Binding Titulo}" FontSize="34" Height="100" TextWrapping="Wrap"  />
                                        <TextBlock FontWeight="Normal" Text="{Binding Subtitulo}" FontSize="30" Margin="0,0,0,10"/>

                                        <ScrollViewer Height="290">
                                            <common:RichTextColumns x:Name="richTextColumns">
                                                <RichTextBlock x:Name="richTextBlock" FontSize="28" TextAlignment="Justify" IsTextSelectionEnabled="False">
                                                    <Paragraph>
                                                        <Run FontWeight="SemiLight" Text="{Binding Conteudo}"/>
                                                    </Paragraph>
                                                </RichTextBlock>
                                            </common:RichTextColumns>
                                        </ScrollViewer>
                                    </StackPanel>
                                </StackPanel>
                                <VisualStateManager.VisualStateGroups>

                                <!-- Visual states reflect the application's view state inside the FlipView -->
                                <VisualStateGroup x:Name="ApplicationViewStates">
                                    <VisualState x:Name="FullScreenLandscape"/>
                                    <VisualState x:Name="Filled"/>

                                    <!-- Respect the narrower 100-pixel margin convention for portrait -->
                                    <VisualState x:Name="FullScreenPortrait">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="richTextColumns" Storyboard.TargetProperty="Margin">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="97,0,87,57"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="image" Storyboard.TargetProperty="MaxHeight">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="400"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>

                                    <!-- When snapped, the content is reformatted and scrolls vertically -->
                                    <VisualState x:Name="Snapped">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="richTextColumns" Storyboard.TargetProperty="Margin">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="17,0,17,57"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="scrollViewer" Storyboard.TargetProperty="Style">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource VerticalScrollViewerStyle}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="richTextBlock" Storyboard.TargetProperty="Width">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="280"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="image" Storyboard.TargetProperty="MaxHeight">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="160"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            </Grid>
                        </ScrollViewer>
                    </UserControl>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>

        <FlipView
            x:Name="itemListView"
            AutomationProperties.AutomationId="ItemsFlipView"
            AutomationProperties.Name="Item Details"
            TabIndex="1"
            Grid.RowSpan="2"
            Padding="0,-30,0,0"
            Visibility="Collapsed"
            ItemsSource="{Binding Source={StaticResource itemsViewSource}}">
            <FlipView.ItemContainerStyle>
                <Style TargetType="FlipViewItem">
                    <Setter Property="Margin" Value="0,148,0,0"/>
                </Style>
            </FlipView.ItemContainerStyle>

            <FlipView.ItemTemplate >
                <DataTemplate>                    
                    <UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates">
                        <ScrollViewer x:Name="scrollViewer" Style="{StaticResource HorizontalScrollViewerStyle}" Grid.Row="0">
                            <Grid Margin="0,0,0,0" >
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="200"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="320"></ColumnDefinition>                                   
                                </Grid.ColumnDefinitions>
                                <StackPanel  Width="320" Height="200">
                                    <Image x:Name="image"  
                                       Stretch="Fill" Source="{Binding Image}" 
                                       Width="320" Height="200"
                                       AutomationProperties.Name="{Binding Titulo}" Grid.Row="0" Grid.Column="0"  />
                                    <TextBlock x:Name="txbTitulo" TextWrapping="NoWrap" TextTrimming="WordEllipsis" Margin="20,-30,30,0" Text="{Binding Titulo}" FontSize="24"  MaxHeight="40"  />
                                </StackPanel>

                                <StackPanel  Grid.Row="1" Grid.Column="0" Width="320"  Margin="0,0,0,0" 
                                           >
                                    <Border Background="#EE9A00" Height="445"  Width="320" ></Border>
                                    
                                    <StackPanel Margin="20,-400,20,50" >

                                        <TextBlock  TextWrapping="NoWrap" TextTrimming="WordEllipsis" FontWeight="Normal" Text="{Binding Subtitulo}" FontSize="20" Margin="0,0,0,10"/>
                                        <Line  StrokeThickness="10" Stroke="Red" Visibility="Visible"></Line>
                                            <ScrollViewer Height="330" Padding="0,0,20,20">
                                            <common:RichTextColumns x:Name="richTextColumns">
                                                <RichTextBlock  x:Name="richTextBlock" FontSize="18" TextAlignment="Justify" IsTextSelectionEnabled="False">
                                                    <Paragraph>
                                                        <Run  FontWeight="SemiLight" Text="{Binding Conteudo}"/>
                                                    </Paragraph>
                                                </RichTextBlock>
                                            </common:RichTextColumns>
                                        </ScrollViewer>
                                    </StackPanel>

                                   
                                </StackPanel>
                                <VisualStateManager.VisualStateGroups>

                                    <!-- Visual states reflect the application's view state inside the FlipView -->
                                    <VisualStateGroup x:Name="ApplicationViewStates">
                                        <VisualState x:Name="FullScreenLandscape"/>
                                        <VisualState x:Name="Filled"/>

                                        <!-- Respect the narrower 100-pixel margin convention for portrait -->
                                        <VisualState x:Name="FullScreenPortrait">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="richTextColumns" Storyboard.TargetProperty="Margin">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="97,0,87,57"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="image" Storyboard.TargetProperty="MaxHeight">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="400"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>

                                        <!-- When snapped, the content is reformatted and scrolls vertically -->
                                        <VisualState x:Name="Snapped">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="richTextColumns" Storyboard.TargetProperty="Margin">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="17,0,17,57"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="scrollViewer" Storyboard.TargetProperty="Style">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource VerticalScrollViewerStyle}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="richTextBlock" Storyboard.TargetProperty="Width">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="280"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="image" Storyboard.TargetProperty="MaxHeight">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="160"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                            </Grid>
                        </ScrollViewer>
                    </UserControl>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>

        <!-- Back button and page title -->
        <Grid  Height="135">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
            <StackPanel Orientation="Horizontal" Margin="120,0,0,0" Height="110"  >
                <Border Padding="10" Style="{StaticResource CorFundoTituloPagina}">
                    <TextBlock x:Name="pageTitle" Text="{Binding Titulo}"
                                   Style="{StaticResource TextoCabecalhoPagina}" ></TextBlock>
                </Border>
                <Image  Style="{StaticResource ImagemCabecalhoPagina}" Source="{StaticResource ImagemCabecalho}" >

                </Image>

            </StackPanel>
           
        </Grid>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The back button respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="flipView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        
        
    </Grid>
    
    
</common:LayoutAwarePage>
